<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span class="title">折旧趋势图</span>
      <div class="fr">
        <el-form ref="form" :model="form" inline>
          <el-form-item label="资产类别">
            <tree-select
              v-model="form.path"
              :options="assetTypeList"
              :props="{
                label: 'treedataname',
                value:'path',
                children: 'childList'
              }"
            />
          </el-form-item>
          <el-form-item label="期间">
            <el-date-picker
              v-model="form.dateArea"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              style="width: 210px"
              value-format="yyyyMM"
              unlink-panels
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getData">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div>
      <div id="asset" style="height: 400px; width: 100%;" />
    </div>
  </el-card>
</template>
<script>
import echarts from 'echarts'
import { getChartsData } from '@/api/basic-setting/dashboard/dashboard'
import { mapGetters } from 'vuex'

export default {
  name: 'FooterTabs',
  components: { },
  data() {
    return {
      form: {
        path: '',
        dateArea: []
      },
      dataChart: [],
      xData: [],
      yData: []
    }
  },
  computed: {
    ...mapGetters(['assetTypeList'])
  },
  created() {
    this.getData()
    this.$store.dispatch('common/getAssetType')
  },
  mounted() {

  },
  methods: {
    async getData() {
      const res = await getChartsData(
        {
          path: this.form.path,
          strsdate: this.form.dateArea && this.form.dateArea[0] || '',
          stredate: this.form.dateArea && this.form.dateArea[1] || ''
        }
      )
      if (res.code === 20000) {
        this.dataChart = res.data
        this.xData = []
        this.yData = []
        res.data.forEach(item => {
          this.xData.push(item.lngdepreperiod)
          this.yData.push(item.currentdepreciation)
        })
        this.chartsInit()
      }
    },
    chartsInit() {
      const barCharts = echarts.init(document.getElementById('asset'))

      barCharts.setOption({
        title: {
          test: '资产变动'
        },
        legend: {},
        tooltip: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xData
          // data: ['1']
        },
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [{
          name: '',
          type: 'line',
          smooth: true,
          data: this.yData
          // data: [100]
        }]
      })
    }
  }
}
</script>
<style scoped>
    .mt20{
        margin-top: 20px;
    }
    .box-card{
      margin:20px 0 0;
  }
</style>
